<template>
  <div class="flow">
    <div class="formLook">
      <div class="application">
        <TitleComponent title="新建应聘申请表" />
        <div class="application-form">
          <el-form
            ref="formRef"
            :model="applicationForm"
            :rules="rules"
            label-width="100px"
            status-icon
            class="application-form-content"
            label-position="top"
          >
            <el-form-item label="" prop="resumeFile">
              <div class="image-upload-container">
                <Upload
                  :modelValue="applicationForm.personPhoto"
                  :isShowTip="false"
                  :fileType="photoFileType"
                  @update:modelValue="uploadPhoto"
                ></Upload>
              </div>

              <div class="document-container">
                <p class="document-label">附件简历：</p>
                <UploadFile
                  :modelValue="applicationForm.resumeFile"
                  :isShowTip="false"
                  :fileType="fileType"
                  @update:modelValue="uploadFile"
                ></UploadFile>
              </div>
            </el-form-item>

            <!-- 基本信息 -->
            <div class="section-title">
              <span>基本信息</span>
            </div>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名：" prop="name">
                  <el-input
                    v-model="applicationForm.name"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别：" prop="sex">
                  <el-select v-model="applicationForm.sex">
                    <el-option label="男" :value="0" />
                    <el-option label="女" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系电话：" prop="phoneNumber">
                  <el-input
                    v-model="applicationForm.phoneNumber"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱：" prop="mail">
                  <el-input
                    v-model="applicationForm.mail"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证号：" prop="idNumber">
                  <el-input
                    v-model="applicationForm.idNumber"
                    placeholder="请选择"
                    @blur="validateIdNumber"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出生日期：" prop="birthTime">
                  <el-date-picker
                    v-model="applicationForm.birthTime"
                    type="date"
                    disabled
                    placeholder="请选择"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="年龄：" prop="age">
                  <el-input
                    v-model="applicationForm.age"
                    disabled
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="毕业院校：" prop="graduateSchool">
                  <el-input
                    v-model="applicationForm.graduateSchool"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="专业名称：" prop="profession">
                  <el-input
                    v-model="applicationForm.profession"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学历：" prop="educationalBackground">
                  <el-input
                    v-model="applicationForm.educationalBackground"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 工作经历 -->
            <div class="section-title">
              <span>工作经历</span>
            </div>

            <div
              v-for="(experience, index) in applicationForm.workExperiences"
              :key="index"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item
                    label="开始时间："
                    prop="workExperiences.startTime"
                  >
                    <el-date-picker
                      v-model="experience.startTime"
                      type="date"
                      placeholder="请选择"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="结束时间："
                    prop="workExperiences.endTime"
                  >
                    <el-date-picker
                      v-model="experience.endTime"
                      type="date"
                      placeholder="请选择"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item
                    label="公司名称："
                    prop="workExperiences.companyName"
                  >
                    <el-input
                      v-model="experience.companyName"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="担任职务："
                    prop="workExperiences.positionHeld"
                  >
                    <el-input
                      v-model="experience.positionHeld"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item
                    label="主要工作内容："
                    prop="workExperiences.mainWorkContent"
                  >
                    <el-input
                      v-model="experience.mainWorkContent"
                      type="textarea"
                      placeholder="请输入"
                      :autosize="{ minRows: 3, maxRows: 6 }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="备注：" prop="workExperiences.remark">
                    <el-input
                      v-model="experience.remark"
                      type="textarea"
                      placeholder="请输入"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <div style="text-align: right; margin-bottom: 20px">
                <el-button type="text" @click="removeWorkExperience(index)"
                  >删除本段</el-button
                >
              </div>
            </div>

            <div style="text-align: center; margin-bottom: 20px">
              <el-button @click="addWorkExperience">+ 新增工作经历</el-button>
            </div>

            <!-- 应聘信息 -->
            <div class="section-title">
              <span>应聘信息</span>
            </div>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="应聘岗位" prop="applicationPositonName">
                  <el-row :gutter="24">
                    <el-col :span="9">
                      <el-button
                        type="primary"
                        @click="openDemandDetails"
                        style="width: 100%"
                      >
                        选择应聘岗位
                      </el-button>
                    </el-col>
                    <el-col :span="15">
                      <el-input
                        v-model="applicationForm.applicationPositonName"
                        clearable
                        placeholder="请选择应聘岗位"
                        disabled
                        :autosize="{ minRows: 1, maxRows: 1 }"
                        maxlength="50"
                        show-word-limit
                        style="width: 100%"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="应聘渠道" prop="applicationSource">
                  <el-select
                    clearable
                    v-model="applicationForm.applicationSource"
                    placeholder="可多选"
                    multiple
                    :multiple-limit="10"
                  >
                    <el-option
                      v-for="item in applicationSourceList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <div style="text-align: left; margin-top: 20px">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm" class="button">取消</el-button>
            </div>
          </el-form>

          <!-- 应聘岗位弹窗 -->
          <el-dialog
            v-model="demandDetailsVisible"
            title="应聘岗位列表"
            width="80%"
            center
            :close-on-click-modal="false"
            :close-on-press-escape="false"
          >
            <div>
              <div>
                <el-form
                  ref="demandRef"
                  :inline="true"
                  :model="demandDetailsSearch"
                  class="demo-form-inline"
                >
                  <el-form-item prop="buId">
                    <el-select
                      v-model="demandDetailsSearch.buId"
                      clearable
                      placeholder="请输入申请部门"
                      style="width: 240px"
                    >
                      <el-option
                        v-for="item in buIdOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="name">
                    <el-input
                      v-model="demandDetailsSearch.name"
                      placeholder="请输入需求岗位"
                      clearable
                    />
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="Search"
                      @click="handleQuery"
                    ></el-button>
                  </el-form-item>
                </el-form>
              </div>
              <el-table
                :data="demandDetailsData"
                height="550"
                @selection-change="selectionDemandDetails"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="55" />
                <el-table-column
                  prop="requireEmergencyLevel"
                  label="岗位紧急程度"
                  width="180"
                >
                  <template v-slot="scope">
                    <el-tag
                      type="primary"
                      size="large"
                      class="elTag"
                      :color="
                        scope.row.requireEmergencyLevel == 2
                          ? 'rgba(245, 0, 0,100)'
                          : scope.row.requireEmergencyLevel == 0
                          ? 'rgba(10, 90, 235)'
                          : 'rgba(245, 154, 35)'
                      "
                      >{{
                        scope.row.requireEmergencyLevel == 0
                          ? "一般"
                          : scope.row.requireEmergencyLevel == 1
                          ? "紧急"
                          : "非常紧急"
                      }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="jobCode" label="岗位编号" width="180" />
                <el-table-column prop="jobName" label="岗位名称" />
                <el-table-column
                  prop="requireProposerName"
                  label="需求申请人"
                />
                <el-table-column prop="requireDeptName" label="需求部门" />
                <el-table-column prop="requirePersonNumber" label="需求人数" />
                <el-table-column prop="hopeArrivalTime" label="希望到岗日期" />
                <el-table-column prop="closeTime" label="截至日期" />
                <el-table-column prop="proposeTime" label="申请日期" />
              </el-table>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="demandDetailsCancel(demandRef)"
                  >取消</el-button
                >
                <el-button type="primary" @click="demandDetailsOk(demandRef)">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>

          <CommonAlertDialog
            v-model="showAgeWarning"
            title="风险提示"
            type="danger"
            :content="`系统检测到<strong>${applicationForm.name}</strong>年龄未满16周岁，不符合录用条件！`"
            confirm-text="继续入职"
            cancel-text="取消操作"
            button-size="large"
            @confirm="onAgeWarningConfirm"
            @cancel="onAgeWarningCancel"
          >
            <template #default>
              <div class="custom-warning">
                <el-alert type="error" :closable="false">
                  根据《劳动合同法》，禁止招用未满16周岁的未成年人。违者将承担罚款、吊销执照甚至刑事责任。请务必核实员工年龄信息，合规用工，保护未成年人权益。
                </el-alert>
              </div>
            </template>
          </CommonAlertDialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, getCurrentInstance } from "vue";
import TitleComponent from "@/components/TitleComponent.vue";
import Upload from "@/components/FileUpload/phoTo.vue";
import UploadFile from "@/components/FileUpload/index.vue";
import { isEmail, isPhoneNum, isIdCard, formatDate } from "@/utils/index.js";

import {
  getTalentPoolList,
  newJobApplication,
  searchDepyList,
} from "@/api/recruitment/jobApplication/index.js";
import CommonAlertDialog from "@/components/CommonAlertDialog/index.vue";

import useUserStore from "@/store/modules/user";

const formRef = ref(null);

const showAgeWarning = ref(false);
const employeeName = ref("张三");

const userStore = useUserStore();

const hasEmployeeRole = computed(() => {
  return userStore.roles.includes("HR");
});
console.log(hasEmployeeRole, "hasEmployeeRole");

const applicationSourceList = reactive([
  {
    label: "官方网站",
    value: "官方网站",
  },
  {
    label: "智联",
    value: "智联",
  },
  {
    label: "前程无忧",
    value: "前程无忧",
  },
  {
    label: "boss直聘",
    value: "boss直聘",
  },
  {
    label: "其他招聘网站",
    value: "其他招聘网站",
  },
  {
    label: "内部推荐",
    value: "内部推荐",
  },
  {
    label: "人才库",
    value: "人才库",
  },
]);
const hoverIndex = ref(null);
const fileType = ref(["doc", "docx", "pdf"]);
const photoFileType = ref(["jpg", "jpeg", "png", "pdf"]);
const { proxy } = getCurrentInstance();
// 应聘岗位弹窗
const demandDetailsVisible = ref(false);
// 应聘岗位数据
const demandDetailsData = ref([]);
const demandDetailsSearch = reactive({
  buId: "",
  name: "",
  status: 0,
});
// 选择应聘岗位
const selectDemand = ref([]);
// 选择后需要的数据

const buIdOptions = reactive([]);

// 表单数据
const applicationForm = reactive({
  // 简历附件
  resumeFile: "",
  // 个人照片
  personPhoto: "",
  name: "", //姓名
  sex: "", //性别
  phoneNumber: "", //电话
  mail: "", //邮箱
  idNumber: "", //身份证
  birthTime: "", //出生日期
  age: "", //岁数
  graduateSchool: "", // 毕业院校
  profession: "", //专业名称
  educationalBackground: "", //学历
  workExperiences: [
    // {
    //   startTime: "",
    //   endTime: "",
    //   companyName: "", // 公司名称
    //   positionHeld: "", //担任职务
    //   mainWorkContent: "", //主要工作内容
    //   remark: "", // 备注
    // },
  ],
  applicationPositonName: "", // 应聘岗位
  applicationSource: [], // 应聘渠道,

  // 应聘岗位id
  applicationPositonId: "",
  // 应聘渠道

  // 需求部门id
  requireDeptId: "",
  // 需求部门
  requireDeptName: "",
  // 岗位编号
  jobCode: "",
  // 期望到岗日期
  hopeArrivalTime: "",
});

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
  phoneNumber: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!isPhoneNum(value)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  mail: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error("请输入正确的邮箱"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  idNumber: [
    { required: true, message: "请输入身份证号", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!isIdCard(value)) {
          callback(new Error("请输入正确的身份证号"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  birthTime: [{ required: true, message: "请选择出生日期", trigger: "change" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  graduateSchool: [
    { required: true, message: "请输入毕业院校", trigger: "blur" },
  ],
  profession: [{ required: true, message: "请输入专业名称", trigger: "blur" }],
  educationalBackground: [
    { required: true, message: "请输入专业名称", trigger: "blur" },
  ],
  applicationPositonName: [
    { required: true, message: "请输入应聘岗位", trigger: "blur" },
  ],
  applicationSource: [
    { required: true, message: "请选择应聘渠道", trigger: "change" },
  ],
});
// 添加工作经历
const addWorkExperience = () => {
  applicationForm.workExperiences.push({
    startTime: "",
    endTime: "",
    companyName: "",
    positionHeld: "",
    mainWorkContent: "",
    remark: "",
  });
};

// 删除工作经历
const removeWorkExperience = (index) => {
  applicationForm.workExperiences.splice(index, 1);
};

// 身份证号验证与年龄计算
const validateIdNumber = () => {
  if (applicationForm.idNumber && isIdCard(applicationForm.idNumber)) {
    const birthDateStr = applicationForm.idNumber.substring(6, 14);
    const year = birthDateStr.substring(0, 4);
    const month = birthDateStr.substring(4, 6);
    const day = birthDateStr.substring(6, 8);
    applicationForm.birthTime = `${year}-${month}-${day}`;
    calculateAge();
  } else {
    applicationForm.birthTime = "";
    applicationForm.age = "";
  }
};
const uploadPhoto = (files) => {
  console.log(files, "applicationForm---files");
  applicationForm.personPhoto = files;
};
// resumeFile
const uploadImage = (files) => {
  console.log(files, "files");
  applicationForm.personPhoto = files;
};
const uploadFile = (files) => {
  applicationForm.resumeFile = files;
};

// 计算年龄
const calculateAge = () => {
  if (applicationForm.birthTime) {
    const birthDate = new Date(applicationForm.birthTime);
    const today = new Date();
    let ageCalculated = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();
    if (
      monthDiff < 0 ||
      (monthDiff === 0 && today.getDate() < birthDate.getDate())
    ) {
      ageCalculated--;
    }
    applicationForm.age = ageCalculated;
  }
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // HR用户且年龄小于16岁时触发年龄警告
      if (hasEmployeeRole.value && applicationForm.age < 16) {
        showAgeWarning.value = true;
      } else {
        // 直接进入确认流程
        showConfirmDialog();
      }
    } else {
      ElMessage.error("请填写应聘申请人的基本信息");
    }
  });
};

// 单独封装的确认对话框
const showConfirmDialog = () => {
  ElMessageBox.confirm(`是否要提交这条用人需求申请?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await handleSubmit();
    })
    .catch(() => {
      // 取消操作
    });
};

// 单独封装的提交逻辑
const handleSubmit = async () => {
  try {
    const submitData = {
      ...applicationForm,
      applicationSource: applicationForm.applicationSource?.join(","),
      workExperiences: applicationForm.workExperiences?.map((item) => ({
        ...item,
        startTime: formatDate(item.startTime).dates,
        endTime: formatDate(item.endTime).dates,
      })),
      sex: Number(applicationForm.sex),
      age: Number(applicationForm.age),
    };

    const res = await newJobApplication(submitData);
    if (res.code === 200) {
      ElMessage.success("提交成功");
      resetForm();
    }
  } catch (error) {
    console.error("提交出错:", error);
  }
};

// 监听年龄警告弹窗的确认
const onAgeWarningConfirm = () => {
  showAgeWarning.value = false;
  showConfirmDialog(); // 继续执行后续确认流程
};

// 监听年龄警告弹窗的取消
const onAgeWarningCancel = () => {
  showAgeWarning.value = false;
  // 不执行后续操作
};

// const submitForm = () => {
//   formRef.value.validate((valid) => {
//     if (valid) {

//       // hasEmployeeRole

//     showAgeWarning.value = true;

//       ElMessageBox.confirm(`是否要提交这条用人需求申请?`, "提示", {
//         confirmButtonText: "确认",
//         cancelButtonText: "取消",
//         type: "warning",
//       }).then(async () => {
//         try {
//           // 创建提交数据的副本，不影响原始表单数据
//           const submitData = {
//             ...applicationForm,
//             // 只在提交时转换格式
//             applicationSource: applicationForm.applicationSource?.join(","),
//             workExperiences: applicationForm.workExperiences?.map((item) => ({
//               ...item,
//               startTime: formatDate(item.startTime).dates,
//               endTime: formatDate(item.endTime).dates,
//             })),
//             sex: Number(applicationForm.sex),
//             age: Number(applicationForm.age),
//           };

//           const res = await newJobApplication(submitData);

//           if (res.code === 200) {
//             ElMessage({
//               type: "success",
//               message: `提交成功`,
//             });
//             resetForm();
//           } else {
//             // 提交失败不需要做任何转换，因为使用的是副本
//             // ElMessage.error(res.message || "提交失败");
//           }
//         } catch (error) {
//           console.error("提交出错:", error);
//           // ElMessage.error("提交过程中发生错误");
//           // 错误情况下原始数据保持不变
//         }
//       });
//     } else {
//       ElMessage.error("请填写应聘申请人的基本信息");
//     }
//   });
// };

// 弹窗相关逻辑
const demandRef = ref();
const demandDetailsCancel = () => {
  demandDetailsVisible.value = false;
};
const demandDetailsOk = () => {
  if (selectDemand.value.length === 1) {
    const selected = selectDemand.value[0];
    applicationForm.applicationPositonName = selected.jobName;
    applicationForm.applicationPositonId = selected.id;
    applicationForm.requireDeptId = selected.requireDeptId;
    applicationForm.requireDeptName = selected.requireDeptName;
    applicationForm.jobCode = selected.jobCode;
    applicationForm.hopeArrivalTime = selected.hopeArrivalTime;
    demandDetailsVisible.value = false;
  } else {
    ElMessage.warning("请选择一条应聘岗位");
  }
};

const getDemandDetailsList = async () => {
  const { data } = await searchDepyList();
  if (data.length > 0) {
    data.forEach((item) => {
      buIdOptions.push({
        label: item.deptName,
        value: item.deptId,
      });
    });
  }
};

const selectionDemandDetails = (val) => {
  selectDemand.value = val;
};

const handleQuery = () => {
  getTalentPoolList(demandDetailsSearch).then((res) => {
    demandDetailsData.value = res;
  });
};

// 应聘岗位弹窗开启
const openDemandDetails = () => {
  getDemandDetailsList();
  handleQuery();
  demandDetailsVisible.value = true;
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
  proxy.$tab.closeOpenPage({ path: "/recruitment/jobApplication" });
};
</script>

<style scoped>
/* 16191D */
:deep(.el-form-item--label-top .el-form-item__label) {
  color: #16191d !important;
  font-weight: 400;
}
:deep(.ele-upload-list__item-content-action) {
  margin-left: 20px;
}
.application {
  width: 100%;
  overflow: auto;
  background: #fff;
}
.application-form {
  overflow: auto;
  width: 70%;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
}

.form-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-row {
  margin-bottom: 15px;
}

.el-button {
  margin: 0 10px;
}

.image-upload-container {
  position: relative;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 80px !important;
}

.image-uploader {
  width: 100%;
  height: 100%;
}

.uploaded-image {
  width: 75px !important;
  height: 120px !important;
  object-fit: contain;
}

.image-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  border-radius: 4px;
}

.document-container {
  margin-left: 20px;
}

.document-label {
  font-weight: bold;
  margin-bottom: 10px;
}
:deep(.cell .el-tag) {
  color: #fff;
}
.document-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.document-name {
  flex: 1;
  margin: 0 10px;
}

.document-actions {
  display: flex;
}

.preview,
.delete {
  margin-left: 10px;
  color: #409eff;
  text-decoration: none;
}

.preview:hover,
.delete:hover {
  text-decoration: underline;
}

.button {
  color: #7e889b;
  border: 1.5px solid #9aa2b1;
}
</style>
